<template>
  <el-dialog title="选择打包内容" :visible.sync="open" width="500px" append-to-body>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button :disabled="!isSelected"  type="primary" size="mini" @click="handlePackage">{{ buttonText }}</el-button>
      </el-col>
    </el-row>
    <HkTable
      :tableData="tableData"
      :tableColumns="tableColumns"
      :showIndex="true"
      :selection="true"
      @handleSelectionChange="handleSelectionChange">
    </HkTable>
  </el-dialog>
</template>

<script>
import HkTable from '@/components/HKTable/index.vue'
import { packageRegister } from '@/api/system/report'

export default {
  components: { HkTable },
  data() {
    return {
      //  弹窗控制器
      open: false,
      // 选中的id值们
      ids: '',
      //  是否选中
      isSelected: false,
      //  按钮文本
      buttonText: '打包',
      //  table数据
      tableData: [
        { name: '告警信息', type: 1 },
        { name: '告警处置', type: 2 },
        { name: '事件线索', type: 3 },
        { name: '协查请求', type: 4 },
        { name: '协办结果', type: 5 },
        { name: '预警响应', type: 6 },
        { name: '策略变更', type: 7 },
        { name: '对象刻画', type: 8 },
      ],
      //  table配置项
      tableColumns: [{ label: '名称', param: 'name' }],
    }
  },
  methods: {
    /** 表格选中事件 */
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.type)
      this.isSelected = selection.length > 0
      this.buttonText =  selection.length < 2 ? '打包' : '批量打包'
    },

    /** 执行打包 */
    handlePackage() {
      packageRegister({ type: this.ids }).then(res => {
          this.$message.success('打包成功')
          this.$emit('handleSubmit')
          this.open = false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
button.el-button.el-button--primary.is-disabled,
button.el-button.el-button--primary.is-disabled:active {
  color: #FFFFFF !important;
  background-color: #a5b7f7 !important;
  border-color: #a5b7f7 !important;
}
</style>
